<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>考试记录管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="40" label-position="left" :model="search">
      <FormItem label="学生姓名">
        <Input type="text" v-model="search.student.name" placeholder="请输入学生姓名检索"/>
      </FormItem>
      <FormItem label="考试标题">
        <Input type="text" v-model="search.paper.name" placeholder="请输入考试标题检索"/>
      </FormItem>
      <FormItem label="科目" v-if="subjectTreeData.length">
        <Select v-model="search.subject.parentId" clearable>
          <Option v-for="subject in subjectTreeData[0].children" :value="subject.id" :key="subject.id">{{ subject.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="课程">
        <Select v-model="search.subject.id" clearable>
          <Option v-for="subject in subjectDate" :value="subject.id" :key="subject.id">{{ subject.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="年级" v-if="gradeTreeData.length">
        <Select v-model="search.gradeClass.parentId" clearable>
          <Option v-for="grade in gradeTreeData[0].children" :value="grade.id" :key="grade.id">{{ grade.name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="班级">
        <Select v-model="search.gradeClass.id" clearable>
          <Option v-for="grade in gradeData" :value="grade.id" :key="grade.id">{{ grade.name }}</Option>
        </Select>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <Table stripe row-key="id" :columns="columns" :data="data"></Table>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{marginTop: '20px'}" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
  </div>
</template>

<script>
export default {
  name: 'ScoreLog',
  data: function () {
    return {
      columns: [
        {
          type: 'index'
        },
        {
          title: '学生姓名',
          render: (h, params) => {
            return h('div', {}, params.row.student.name)
          }
        },
        {
          title: '分数',
          key: 'score'
        },
        {
          title: '考试标题',
          render: (h, params) => {
            return h('div', {}, params.row.paper.name)
          }
        },
        {
          title: '开始时间',
          render: (h, params) => {
            return h('div', {}, params.row.paper.startTime)
          }
        },
        {
          title: '时长',
          render: (h, params) => {
            return h('div', {}, params.row.paper.duration)
          }
        },
        {
          title: '科目课程',
          render: (h, params) => h('div', {}, params.row.subject.parentName + ' ' + params.row.subject.name)
        },
        {
          title: '班级',
          render: (h, params) => h('div', {}, params.row.gradeClass.gradeName + ' ' + params.row.gradeClass.name)
        },
        {
          title: '创建时间',
          key: 'createTime'
        }
      ],
      data: [],
      total: 0,
      current: 1,
      pageSize: 10,
      search: {
        student: {},
        paper: {},
        subject: {},
        gradeClass: {}
      },
      subjectTreeData: [],
      gradeTreeData: []
    }
  },
  mounted () {
    this.getData()
    this.$http.get('subject/tree').then(res => {
      if (res.code === 200) {
        this.subjectTreeData = res.data.tree
      }
    })
    this.$http.get('grade/tree').then(res => {
      if (res.code === 200) {
        this.gradeTreeData = res.data.tree
      }
    })
  },
  computed: {
    subjectDate() {
      if(this.search.subject.parentId != null && this.search.subject.parentId !== '') {
        return this.subjectTreeData[0].children.filter(v => v.id === this.search.subject.parentId)[0].children
      }
      return []
    },
    gradeData() {
      if(this.search.gradeClass.parentId != null && this.search.gradeClass.parentId !== '') {
        return this.gradeTreeData[0].children.filter(v => v.id === this.search.gradeClass.parentId)[0].children
      }
      return []
    }
  },
  methods: {
    getData () {
      this.$http.post(`studentTestPaper/get?pageNo=${this.current}&pageSize=${this.pageSize}`, this.search).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
</style>
